<template>
	<view class="viewimg">
<!-- 		<view>
			<view>echarts示列</view>
			<echarts :option="option" style="height: 300px;"></echarts>
			<button @click="updateClick">更新数据</button>
		</view>
		<view>
			<echarts :option="optionone" style="height: 400px;"></echarts>
		</view> -->
		<view>
			<echarts :option="optiontwo" style="height: 400px;"></echarts>
		</view>
	</view>
</template>
 
<script>
	import echarts from '@/components/echarts/echarts.vue';
	export default {
		data() {
			return {
				option: {},
				optionone: {},
				optiontwo: {}
			};
		},
		onLoad() {
			// console.log(777777);
		},
		components: {
			echarts
		},
		mounted() {
			// this.logstatrt();
			// this.logstatrtone();
			this.logstatrttwo();
		},
		methods: {
			logstatrt() {
				// console.log('初次调用');
				this.option = {
					backgroundColor: '#011246',
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'shadow'
						}
					},
					grid: {
						top: '25%',
						right: '45',
						bottom: '20',
						left: '30'
					},
					legend: {
						data: [{
							name: '人保'
						}, {
							name: '太保'
						}, {
							name: '平安'
						}, {
							name: '人保增速'
						}, {
							name: '太保增速'
						}, {
							name: '平安增速'
						}],
						top: '0%',
						textStyle: {
							color: 'rgba(255,255,255,0.9)' //图例文字
						}
					},
					dataZoom: [{
						type: 'slider',
						realtime: true,
						//移动端展示方式
						handleSize: '100%', //滑动条两侧的大小
						start: 0,
						end: 50
					}],
					grid: {
						left: '3%',
						right: '4%',
						bottom: '15%',
						height: '70%',
						containLabel: true
					},
					xAxis: [{
						type: 'category',
						data: ['2015', '2016', '2017', '2018', '2019'],
						axisLine: {
							lineStyle: {
								color: 'rgba(255,255,255,.1)'
							}
						},
						axisLabel: {
							textStyle: {
								color: 'rgba(255,255,255,.7)',
								fontSize: '14'
							}
						}
					}],
					yAxis: [{
							type: 'value',
							name: '单位万',
							splitLine: {
								show: false
							},
							axisLabel: {
								show: true,
								fontSize: 14,
								color: 'rgba(255,255,255,.6)'
							},
							axisLine: {
								min: 0,
								max: 10,
								lineStyle: {
									color: 'rgba(255,255,255,.4)'
								}
							} //左线色
						},
						{
							type: 'value',
							name: '增速',
							show: true,
							axisLabel: {
								show: true,
								fontSize: 14,
								formatter: '{value} %',
								color: 'rgba(255,255,255,.6)'
							},
							axisLine: {
								lineStyle: {
									color: 'rgba(255,255,255,.4)'
								}
							}, //右线色
							splitLine: {
								show: true,
								lineStyle: {
									color: 'rgba(255,255,255,.1)'
								}
							} //x轴线
						}
					],
					series: [{
							name: '人保',
							type: 'bar',
							data: [35, 36.6, 38.8, 40.84, 41.6],
							// "barWidth": "30",
							itemStyle: {
								normal: {
									color: {
										type: 'linear',
										x: 0.5,
										y: 0.5,
										r: 0.5,
										colorStops: [{
												offset: 0,
												color: '#00FFE3' // 0% 处的颜色
											},
											{
												offset: 1,
												color: '#4693EC' // 100% 处的颜色
											}
										],
										globalCoord: false // 缺省为 false
									}
								}
							}
							// "barGap": "0.2"
						},
						{
							name: '太保',
							type: 'bar',
							data: [16, 14.8, 14.1, 15, 16.3],
 
							color: {
								type: 'linear',
								x: 0.5,
								y: 0.5,
								r: 0.5,
								colorStops: [{
										offset: 0,
										color: '#248ff7' // 0% 处的颜色
									},
									{
										offset: 1,
										color: '#6851f1' // 100% 处的颜色
									}
								],
								globalCoord: false // 缺省为 false
							}
						},
						{
							name: '平安',
							type: 'bar',
							data: [10.2, 9.2, 9.1, 9.85, 8.9],
							color: {
								type: 'linear',
								x: 0.5,
								y: 0.5,
								r: 0.5,
								colorStops: [{
										offset: 0,
										color: '#fccb05' // 0% 处的颜色
									},
									{
										offset: 1,
										color: '#f5804d' // 100% 处的颜色
									}
								],
								globalCoord: false // 缺省为 false
							}
						},
						{
							name: '人保增速',
							type: 'line',
							yAxisIndex: 1,
 
							data: [0, 6.01, 5.26, 1.48],
							lineStyle: {
								normal: {
									width: 2
								}
							},
							itemStyle: {
								normal: {
									color: '#86d370'
								}
							},
							smooth: true
						},
						{
							name: '太保增速',
							type: 'line',
							yAxisIndex: 1,
 
							data: [0, -4.73, 6.38, 8.67],
							lineStyle: {
								normal: {
									width: 2
								}
							},
							itemStyle: {
								normal: {
									color: '#3496f8'
								}
							},
							smooth: true
						},
						{
							name: '平安增速',
							type: 'line',
							yAxisIndex: 1,
 
							data: [0, -1.09, 8.24, -9.64],
							lineStyle: {
								normal: {
									width: 2
								}
							},
							itemStyle: {
								normal: {
									color: '#fbc30d'
								}
							},
							smooth: true
						}
					]
				};
			},
			logstatrtone() {
				this.optionone = {
					backgroundColor: '#0c1e55',
 
					color: ['#00a0fc', '#ffe400', '#ff9a09', '#ef1e5f', '#23cbe5', '#ec561b', '#ffa500', '#dddf00', '#b23aee',
						'#50b332'
					],
 
					tooltip: {
						trigger: 'item',
						// formatter: "   {a} <br/>{b} : {c} ({d}%)"
						formatter: "   企业数：{c}"
					},
					legend: { // 图例-图上面的分类
						// orient: 'vertical',
						// right: 30,
						//   icon: 'rect',//长方形
						icon: 'circle',
						top: "1%",
						itemWidth: 10,
						itemHeight: 10,
						// itemGap: 13,
						data: ['16℃以下', '16-18℃', '18-20℃', '20-22℃', '22-24℃', '24-26℃', '26℃以上'],
						// right: '56%',
						textStyle: {
							fontSize: 14,
							color: '#a6cde8',
							lineHeight: 49
						},
						formatter: function(name) {
							return "" + name + ""
						},
						padding: [2, 2]
					},
					grid: {
						top: '20%',
						left: '53%',
						right: '10%',
						bottom: '6%',
						containLabel: true
					},
 
					series: [{
						label: {
							normal: {
								formatter: '{b|{b}：} {c} \n  {per|{d}%} ',
								rich: {}
							},
							emphasis: {
								show: true,
							}
						},
						// labelLine: {
						//     normal: {
						//         show: false
						//     }
						// },
						name: '访问来源',
						type: 'pie',
						radius: '55%',
						center: ['50%', '60%'],
						data: [{
								value: 195,
								name: '16℃以下'
							},
							{
								value: 185,
								name: '16-18℃'
							},
							{
								value: 260,
								name: '18-20℃'
							},
							{
								value: 213,
								name: '20-22℃'
							},
							{
								value: 52,
								name: '22-24℃'
							},
							{
								value: 35,
								name: '24-26℃'
							},
							{
								value: 46,
								name: '26℃以上'
							},
						],
						itemStyle: {
							emphasis: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							}
						},
						labelLine: {
							normal: {
								length: 5,
								length2: 1,
								smooth: true,
							}
						},
					}]
				};
			},
			logstatrttwo() {
				var m2R2Data = [{
						value: 335,
						value1: 234,
						legendname: 'Ⅰ类',
						name: "Ⅰ类",
						itemStyle: {
							color: "#8d7fec"
						}
					},
					{
						value: 310,
						value1: 314,
						legendname: 'Ⅱ类',
						name: "Ⅱ类",
						itemStyle: {
							color: "#5085f2"
						}
					},
					{
						value: 234,
						value1: 235,
						legendname: 'Ⅲ类',
						name: "Ⅲ类",
						itemStyle: {
							color: "#e75fc3"
						}
					},
					{
						value: 154,
						value1: 213,
						legendname: 'Ⅳ类',
						name: "Ⅳ类",
						itemStyle: {
							color: "#f87be2"
						}
					},
					{
						value: 335,
						value1: 321,
						legendname: 'Ⅴ类',
						name: "Ⅴ类",
						itemStyle: {
							color: "#f2719a"
						}
					},
 
				];
 
				this.optiontwo = {
					title: [{
							text: '全网调控情况',
							textStyle: {
								fontSize: 16,
								color: "black"
							},
							left: "35%"
						},
						{
							text: '全网均温',
							subtext: 44.5 + '℃',
							textStyle: {
								fontSize: 15,
								color: "black"
							},
							subtextStyle: {
								fontSize: 20,
								color: 'black'
							},
							textAlign: "center",
							x: '40%',
							y: '44%',
						}
					],
					tooltip: {
						trigger: 'item',
						formatter: function(parms) {
							var str = parms.seriesName + "</br>" +
								parms.marker + "" + parms.data.legendname + "</br>" +
								"当前温度：" + parms.data.value + "</br>" +
								"目标温度：" + parms.data.value1 + "</br>" +
								"占比：" + parms.percent + "%";
							return str;
						}
					},
					legend: {
						type: "scroll",
						orient: 'vertical',
						left: '80%',
						align: 'left',
						top: 'middle',
						textStyle: {
							color: '#8C8C8C'
						},
 
					},
					series: [{
						name: '全网调控情况',
						type: 'pie',
						center: ['40%', '50%'],
						radius: ['40%', '65%'],
						clockwise: false, //饼图的扇区是否是顺时针排布
						avoidLabelOverlap: false,
						itemStyle: { //图形样式
							normal: {
								borderColor: '#ffffff',
								borderWidth: 1,
							},
						},
						label: {
							normal: {
								show: true,
								position: 'outter',
								formatter: function(parms) {
									return parms.data.legendname
								}
							}
						},
						labelLine: {
							normal: {
								length: 15,
								length2: 13,
								smooth: true,
							}
						},
						data: m2R2Data
					}]
				};
			},
			/**
			 * 更新数据
			 */
			updateClick() {
				this.option.series=[{
							name: '人保',
							type: 'bar',
							data: [10, 10, 10, 10, 10],
							// "barWidth": "30",
							itemStyle: {
								normal: {
									color: {
										type: 'linear',
										x: 0.5,
										y: 0.5,
										r: 0.5,
										colorStops: [{
												offset: 0,
												color: '#00FFE3' // 0% 处的颜色
											},
											{
												offset: 1,
												color: '#4693EC' // 100% 处的颜色
											}
										],
										globalCoord: false // 缺省为 false
									}
								}
							}
							// "barGap": "0.2"
						},
						{
							name: '太保',
							type: 'bar',
							data: [16, 14.8, 14.1, 15, 16.3],
 
							color: {
								type: 'linear',
								x: 0.5,
								y: 0.5,
								r: 0.5,
								colorStops: [{
										offset: 0,
										color: '#248ff7' // 0% 处的颜色
									},
									{
										offset: 1,
										color: '#6851f1' // 100% 处的颜色
									}
								],
								globalCoord: false // 缺省为 false
							}
						},
						{
							name: '平安',
							type: 'bar',
							data: [10.2, 9.2, 9.1, 9.85, 8.9],
							color: {
								type: 'linear',
								x: 0.5,
								y: 0.5,
								r: 0.5,
								colorStops: [{
										offset: 0,
										color: '#fccb05' // 0% 处的颜色
									},
									{
										offset: 1,
										color: '#f5804d' // 100% 处的颜色
									}
								],
								globalCoord: false // 缺省为 false
							}
						},
						{
							name: '人保增速',
							type: 'line',
							yAxisIndex: 1,
 
							data: [0, 6.01, 5.26, 1.48],
							lineStyle: {
								normal: {
									width: 2
								}
							},
							itemStyle: {
								normal: {
									color: '#86d370'
								}
							},
							smooth: true
						},
						{
							name: '太保增速',
							type: 'line',
							yAxisIndex: 1,
 
							data: [0, -4.73, 6.38, 8.67],
							lineStyle: {
								normal: {
									width: 2
								}
							},
							itemStyle: {
								normal: {
									color: '#3496f8'
								}
							},
							smooth: true
						},
						{
							name: '平安增速',
							type: 'line',
							yAxisIndex: 1,
 
							data: [0, -1.09, 8.24, -9.64],
							lineStyle: {
								normal: {
									width: 2
								}
							},
							itemStyle: {
								normal: {
									color: '#fbc30d'
								}
							},
							smooth: true
						}
					]
				// this.option = {
				// 	notMerge: true, // 自定义变量：true代表不合并数据，比如从折线图变为柱形图则需设置为true；false或不写代表合并
				// 	xAxis: {
				// 		type: 'category',
				// 		data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
				// 	},
				// 	yAxis: {
				// 		type: 'value'
				// 	},
				// 	series: [{
				// 		data: [120, 200, 150, 80, 70, 110, 130],
				// 		type: 'bar',
				// 		showBackground: true,
				// 		backgroundStyle: {
				// 			color: 'rgba(220, 220, 220, 0.8)'
				// 		}
				// 	}]
				// };
			}
		}
	};
</script>
<style>
	.viewimg {
		height: 100%;
		/* background: #d1e9e9; */
	}
</style>
 